
.lightBox{
    &_contentWrap{
        
    }
    &_content{
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        background-color: black;
        >img{
            // width: 8rem;
            // height: 8rem;
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        &_top{
            height: calc((100% - 8rem) / 2);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            width: 100%;
        }
        &_bottom{
            height: calc((100% - 8rem) / 2);
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 2;
            width: 100%;
        }
        &.hide{
            z-index: -999;
        }
        &.sade-out{
            opacity: 0;
            // transition: opacity .1s ease-out;
        }
        &.show{
            z-index: 2;
            left: 0;
            top: 0;
        }
        &.sade-in{
            // transition: opacity .1s ease-out;
        }
    }
}